import React from 'react'
import { useState } from 'react';
import { useEffect } from 'react';
import store from '../../redux/store'
import {addAction,jianAction,asyncAddAction,asyncJianAction} from "../../redux/reducers/countReducer"
import {zanAddAction,zanJianAction,asynczanJiaAction} from "../../redux/reducers/zanReducer"
import Reduxtwo from './Reduxtwo';
export default function Redux() {
    
    let [update,setUpdate]= useState();
    //加
    let add = ()=>{
        // store.dispatch({type:"jia",payload:1});
        store.dispatch(addAction(1));
        console.log(store.getState());
    }

    let jian = ()=>{
        store.dispatch(jianAction(1));
        console.log(store.getState());
    }

    let asyncadd=()=>{
        asyncAddAction(10);
    }

    let asyncjian = ()=>{
        asyncJianAction(10);
    }

    useEffect(()=>{
        store.subscribe(()=>{  // store.subscribe()    监听 store 中的数据的变化
            //让虚拟dom重新渲染
            setUpdate({});
        })
    })
   
    let {count,zan} = store.getState();
    return (
        
        <div>
            <h1>store 中的数据是:{count}</h1>
            <button style={{width:"60px",height:"20px"}} onClick={add}>+1</button>
            <button style={{width:"60px",height:"20px"}} onClick={jian}>-1</button>
            <button style={{width:"60px",height:"20px"}} onClick={asyncadd}>1秒后+10</button>
            <button style={{width:"60px",height:"20px"}} onClick={asyncjian}>1秒后-10</button>
        
            <hr /><hr />

            <h1>当前的点赞数:{zan}</h1>
            <button onClick={()=>{
                    store.dispatch(zanAddAction(1))
            }}>同步增加点赞数1</button>
            <button onClick={()=>{
                  store.dispatch(zanJianAction(1));
            }}>同步减少点赞数1</button>
            <button onClick={()=>{
                 store.dispatch(asynczanJiaAction(10));
            }}>异增加点赞数1</button>

            <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr /> <hr />


            <Reduxtwo></Reduxtwo>
        </div>
    )
}
